<template>
  <div>

    <div class="container">
      <!-- 头部 -->
      <el-card class="header">
        <el-breadcrumb>
          <el-breadcrumb-item>一级菜单</el-breadcrumb-item>
          <el-breadcrumb-item>二级菜单</el-breadcrumb-item>
          <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-card class="top1">

        <el-row type="flex" justify="space-around" class="nav4">
          <el-col :span="8">
            <span>店铺名称：</span><el-input v-model="shopsname" placeholder="请输入内容" size="mini" @blur="search" />
          </el-col>
          <el-col :span="8">
            <span>用户名称：</span><el-input v-model="username" placeholder="请输入内容" size="mini" @blur="search" />
          </el-col>
          <el-col :span="8">
            <span>状态：</span><el-input v-model="stats" placeholder="请输入内容" size="mini" @blur="search" />
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around" class="nav2">
          <el-col :span="8">
            <span>单号：</span><el-input v-model="oddNumber" placeholder="请输入内容" size="mini" @blur="search" />
          </el-col>
          <el-col :span="8">
            <span>申请日期：</span>
            <el-date-picker
              v-model="dataValue"
              type="datetime"
              placeholder="选择日期时间"
              class="input"
            />
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />

          </el-col>
          <el-col :span="8" />

        </el-row>
        <el-row type="flex" justify="space-between" class="nav3">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="dialogVisible=true">+新建</el-button>
          </el-col>
          <el-col :span="12" style="display: flex;justify-content: flex-end;">
            <el-button type="primary" size="mini" @click="search">查询</el-button><el-button size="mini">重置</el-button>
          </el-col>
        </el-row>
        <!-- 表单区域 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;margin-top:15px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="100"
          />
          <el-table-column
            label="交易类型"
            width="150"
            prop="type"
          >
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            prop="shopsname"
            label="店铺/用户名"
            width="160"
          />
          <el-table-column
            prop="oddNumber"
            label="单号"
            width="180"
            show-overflow-tooltip
          ><template slot-scope="{row}">{{ row.oddNumber | getDate }}</template></el-table-column>
          <el-table-column
            prop="stats"
            label="状态"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="dataValue"
            label="申请时间"
            width="180"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">{{ row.dataValue | getDate }}</template></el-table-column>
          <el-table-column
            prop="remarkss"
            label="备注"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="refund"
            label="确认退款率"
            width="290"
            show-overflow-tooltip
          >
            <template #default="{row}">
              <el-button type="text" size="mini" @click="editData(row)">编辑</el-button>
              <el-button type="text" size="mini" @click="delData(row.id)">删除</el-button>
              <el-popover
                v-model="row._visible"
                placement="top"
                width="400"
                title="确认提现"
                style="margin-left:5px"
              >
                <el-alert
                  title="确认这笔单号吗？它将会记录被加入到账户中去"
                  type="info"
                  show-icon
                />
                <p>备注</p>
                <el-input
                  v-model="remarks"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                />
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row._visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="row._visible = false">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="mini">处理</el-button>
              </el-popover>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          :current-page="page._page"
          :page-sizes="[5,6,10]"
          :page-size="page._limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 弹层组件 -->
      <el-dialog
        title="编辑提现"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
      >
        <el-form ref="roleform" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="类型" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
              <el-option label="类型一" value="shanghai" />
              <el-option label="类型二" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="选择店铺" prop="shopsname">
            <el-input v-model="ruleForm.shopsname" />
          </el-form-item>

          <el-form-item label="选择用户" prop="region">
            <el-select v-model="ruleForm.stats" placeholder="请选择活动区域">
              <el-option label="用户一" value="shanghai" />
              <el-option label="用户二" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="金额" prop="remarkss">
            <el-input v-model="ruleForm.remarkss" />
          </el-form-item>

          <el-form-item label="申请时间" prop="time">
            <el-input v-model="ruleForm.times" />
          </el-form-item>

          <el-form-item label="备注" prop="remarks">
            <el-input v-model="ruleForm.remarks" />
          </el-form-item>
        </el-form>

        <!-- 弹层尾部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBtn">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import { getUserList, editUserList, addUserList, delData } from '@/api/withdrawal';

export default {

  data() {
    return {
      remarks: '',
      visible: false,
      dialogVisible: false,
      // 验证表单
      rules: {

        shopsname: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
        remarks: [
          { required: true, message: '请输入金额', trigger: 'blur' }],

      },
      // 弹层表单

      ruleForm: {
        id: '',
        shopsname: '',
        stats: '',

        times: '',
        remarkss: '',
        region: '',

      },
      // 分页
      page: {
        _page: 2,
        _limit: 5,
        total: 13,
      },
      // 日期
      dataValue: '',
      // 单号
      oddNumber: '',
      // 状态
      stats: '',
      username: '',
      shopsname: '',
      // 表格数据
      tableData: [{
        id: '',
        type: '微信',
        shopsname: '',
        oddNumber: '',
        stats: '',
        dataValue: '',
        remarkss: '',

      }],
    };
  },
  async created() {
    this.getUserList();
    const res = await getUserList();
    this.page.total = res.data.length;
  },
  methods: {
    // 关闭弹层
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.ruleForm = { id: '',
            shopsname: '',
            stats: '',

            times: '',
            remarkss: '',
            region: '' };
        })
        .catch(_ => {});
    },
    // 切换分页
    handleCurrentChange(newPage) {
      this.page._page = newPage;
      this.getUserList();
    },
    handleSizeChange(newSize) {
      this.page._limit = newSize;
      this.getUserList();
    },
    // 获取数据
    async getUserList() {
      const data = await getUserList(this.page);
      // console.log(data);
      this.tableData = data.data.map(v => { v._visible = false; return v; });
    },
    // 编辑and新增数据
    editData(data) {
      this.ruleForm = { ...data };
      this.dialogVisible = true;
      // console.log(this.tableData[0].shopsname);
      // console.log(this.ruleForm);
    },
    async btnOk() {
      if (this.ruleForm.id !== '') {
        await editUserList(this.ruleForm, this.ruleForm.id);
        // console.log(res);
      } else {
        await addUserList(this.ruleForm);
        const res = await getUserList();
        this.page.total = res.data.length;
      }
      this.getUserList();
      // 数据清空
      this.ruleForm = { id: '',
        shopsname: '',
        stats: '',

        times: '',
        remarkss: '',
        region: '' };
      // 移除校验规则
      this.$refs.roleform.clearValidate();
      this.dialogVisible = false;
    },
    // 取消弹出层
    closeBtn() {
      this.ruleForm = { id: '',
        shopsname: '',
        stats: '',

        times: '',
        remarkss: '',
        region: '' };
      // [{
      //   id: '',
      //   type: '微信',
      //   shopsname: '',
      //   oddNumber: '',
      //   stats: '',
      //   dataValue: '',
      //   remarkss: '' }];
      // console.log(this.ruleForm);
      // console.log(this.tableData[0].shopsname);
      // console.log(this.ruleForm.shopsname);
      this.$refs.roleform.clearValidate();
      this.dialogVisible = false;
    },
    // 删除当层数据
    async delData(id) {
      try {
        await this.$confirm('确定删除吗？');
        await delData(id);

        const res = await getUserList();
        this.getUserList();
        this.page.total = res.data.length;
        this.$message.success('删除成功!');
      } catch (error) {
        console.log(error);
      }
    },
    // 查询数据
    async search() {
      if (this.dataValue === '' && this.oddNumber === '' && this.stats === '' && this.username === '' && this.shopsname === '') {
        this.getUserList();
        return;
      }
      const res = await getUserList({ shopsname: this.shopsname });
      this.tableData = res.data.map(v => { v._visible = false; return v; });
    },

  },
};
</script>

<style lang="scss">
.app-main{
  background-color: #f0f2f5;
  .container{
    margin: 10px 10px 0 10px;
  .header{

  height: 40px;
  .el-breadcrumb{
    margin-top: -8px;
  }

}
.top1{
    margin-top: 10px;
    position: relative;
    .nav1{
      position: absolute;
      top: 10px;
      left: 0;
    }
    .nav2,.nav4{
    margin-top: 15px;

    .el-input{
    width:70%;

     }
     .input{

    .el-input__inner{
      height: 31px;

    }
    .el-input__icon {
        line-height: 32px;
      }

 }

}
   .nav3{

     margin-left: -15px;
    .el-col{

      margin: 8px 0 0 10px;
    }

   }
  }
.demo-ruleForm{
    .el-input__inner{
      width: 320px!important;
    }
  }
  }

}
</style>
